<template>
  <div>
    <p>父组件传来的值：{{ num }}</p>
    <p>计算属性：{{ numpx }}</p>
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
    <!-- v-model 的参数 -->
    <!-- 第一种接收 -->
    <!-- <input :value="title" @input="$emit('update:title', $event.target.value)" /> -->
    <!-- 第二种接收 -->
    <input v-model="computedTitle" v-show="isShow" />
    <el-divider></el-divider>
    <div>
      <MySunzi v-bind="attrs"></MySunzi>
      <el-divider></el-divider>
      <MySunzi2 v-if="isMySunzi2"></MySunzi2>
      <el-button
        @click="isMySunzi2 = !isMySunzi2"
        type="primary"
        v-text="isMySunzi2 ? '点击隐藏孙子组件2' : '点击开启孙子组件2'"
      ></el-button>
    </div>
    <el-divider></el-divider>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import { computed, ref, useAttrs } from "vue";
import MySunzi from "./MySunzi.vue";
import MySunzi2 from "./MySunzi2.vue";
const emit = defineEmits(["update:modelValue", "update:title"]);
const props = defineProps({
  num: {
    type: Number,
    default: 0,
  },
  modelValue: String,
  title: String,
});
const numpx = computed(() => {
  return props.num + "px";
});
const computedTitle = computed({
  get() {
    return props.title;
  },
  set(newValue) {
    console.log("newValue: ", newValue);
    emit("update:title", newValue);
  },
});
// ref通讯,子组件必须defineExpose需要暴露的数据或者方法
const list = ref(["JavaScript", "HTML", "CSS"]);
const isShow = ref(true);
const setShow = () => {
  isShow.value = !isShow.value;
};
// 使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
// 可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性
defineExpose({ list, setShow });
// mitt
const isMySunzi2 = ref(true);
// attrs获取除了响应式props之外的属性
const attrs = useAttrs();
console.log("attrs: ", attrs);
</script>

<style lang="scss" scoped></style>
